
function Big( box, width, height, bei, img){
	this.box = box;
	this.width = width;
	this.height = height;
	this.bei = bei;
	this.img = img;
	this.init();
}

Big.prototype.init = function(){
	this.createHtml();
	//this.move();
	
	this.div1.mousemove(this.move.bind(this));
	this.div1.mouseenter(this.enter.bind(this));
	this.div1.mouseleave(this.leave.bind(this));
}

/*Big.prototype.move = function(){
	var that = this;
	this.div1.mousemove(function(e){
		that.glass.css({
			left:e.clientX-that.box.offset().left,
			top:e.clientY-that.box.offset().top
		})
	})
}*/

Big.prototype.enter = function(){
	this.glass.fadeIn();
//	this.div2.fadeIn();
}
Big.prototype.leave = function(){
	this.glass.fadeOut();
//	this.div2.fadeOut();
}

Big.prototype.move = function(e){
	var x = e.clientX-this.box.offset().left-(this.width/this.bei/2);
	var y = e.clientY-this.box.offset().top-(this.height/this.bei/2);
	if( x<0 ){
		x=0;
	}
	var maxX = this.width-this.width/this.bei;
	if( x>maxX ){
		x=maxX;
	}
	if( y<0 ){
		y=0
	}
	var maxY = this.height-this.height/this.bei;
	if( y>maxY ){
		y=maxY
	}
	// 镜子移动
	this.glass.css({
		left:x,
		top:y
	})
	// 大图移动
	this.img2.css({
		left:-x*this.bei,
		top:-y*this.bei
	})
}


Big.prototype.createHtml = function(){
	// 自身div
	this.box.css({
		"position":"relative",
		"width":this.width,
		"height":this.height
	})	
	// 小图div
	var div1 = $("<div></div>");
	div1.css({
		"position":"absolute",
		"width":this.width,
		"height":this.height,
		"border":"1px solid gray",
		"left":"0px",
		"top":"0px"
	})
	this.box.append(div1);
	this.div1 = div1;
	// 小图div中放图片
	var img1 = $("<img>");
	img1.css({
		"position":"absolute",
		"width":this.width,
		"height":this.height
	}).attr("src",this.img)
	div1.append(img1);
	// 小图div上的镜子
	var glass = $("<div></div>");
	glass.css({
		"position":"absolute",
		"width":this.width/this.bei,
		"height":this.height/this.bei,
		"background":"rgba(255,255,0,.5)",
		"display":"none"
	});
	div1.append(glass);
	this.glass = glass;
	
	
	// 大图div
	var div2 = $("<div></div>");
	div2.css({
		"position":"absolute",
		"width":this.width*4,
		"height":this.height*4,
		"border":"1px solid gray",
		"left": this.width+10+"px",
		"top":"0px",
		"overflow":"hidden",
//		"display":"none"
	})
	this.box.append(div2);
	this.div2 = div2;
	// 大图div中放图片
	var img2 = $("<img>");
	img2.css({
		"position":"absolute",
		"width":this.width*this.bei*2,
		"height":this.height*this.bei*2
	}).attr("src",this.img)
	div2.append(img2);
	this.img2 = img2;
}


